<!--
 * @Description: 
 * @Author: xuechengwu
 * @Email: 516385822@qq.com
 * @Date: 2021-11-20 15:13:09
 * @LastEditTime: 2022-02-07 10:27:02
 * @LastEditors: xuechengwu
-->
<template>
    <div class="scene-list-wrapper">
        <div class="scene-tool-wrapper">
            <el-button size="mini" @click="newPage">新建页面</el-button>
        </div>
        <div class="scene-list">
            <div
                v-for="item in containers"
                :key="item.mark"
                :class="$store.state.currentPage === item.mark ? 'page-item active' : 'page-item'"
                @click="$store.commit('SWITCH_PAGE', { mark: item.mark })"
            >
                <div class="page-item-inner">
                    <template v-for="component in item.components">
                        <vdr
                            :key="component.mark"
                            :config="component"
                            :parents="[]"
                            :is-edit="false"
                            :values="item.values"
                            :datas="item.datas"
                            :page="item"
                        >
                        </vdr>
                    </template>
                </div>
                
            </div>
        </div>
        

    </div>
</template>

<script>

export default {
    props: ['containers'],
    mounted() {
        console.log('containers===>', this.containers)
    },
    methods: {
        newPage() {
            this.$store.commit('NEW_PAGE');
        }
    }
}
</script>

<style lang="less" scoped>
.scene-list-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    .scene-tool-wrapper {
        padding: 8px 12px;
    }
    .scene-list {
        flex: 1;
        height: 0;
        overflow: auto;
        text-align: center;
        .page-item {
            width: 188px;
            height: 334px;
            display: inline-block;
            border: solid 1px #EFEFEF;
            &.active {
                border: solid 2px #3083ff;
            }
            .page-item-inner {
                width: 375px;
                height: 667px;
                transform: scale(188/356);
                transform-origin: 0 0;
                text-align: initial;
            }
        }
    }
    
}
</style>